<template>
  <div class="select-image-popup">
    <div class="content">
      <div class="image-group">
        <div class="image-group-radio">
          <el-radio-group v-model="searchParams.userid" size="large" @change="onImageChange">
            <el-radio-button :label="1" :value="1" v-if="userType != 1">我的素材</el-radio-button>
            <el-radio-button :label="-1" :value="-1" v-else>公共素材</el-radio-button>
          </el-radio-group>
        </div>
        <c-select
          width="200px"
          v-model="searchParams.image_type"
          prefixText="类型："
          :loading="typeLoading"
          :optionList="typeGroupData"
          @change="onGroupTypeChange"
        ></c-select>
        <div style="margin-top: 10px">
          <c-select
            width="200px"
            v-model="searchParams.use_status"
            prefixText="使用状态："
            :optionList="ImageUseStatus"
            @change="onImageStatusChange"
          ></c-select>
        </div>

        <div class="image-group-content">
          <table-group
            width="200px"
            v-model="searchParams.image_group_id"
            :loading="groupLoading"
            :list="groupData"
            :options="{ label: 'name', id: '_id' }"
            isPreview
            :isCard="false"
            @on-change="onGroupChange"
          >
            <template #header> </template>
          </table-group>
        </div>
      </div>

      <virtual-scroll-grid
        :loading="virtualLoading"
        :itemSize="itemSize"
        :rowCount="rowCount"
        :aspectRatio="aspectRatio"
        :imageType="searchParams.image_type"
        height="100%"
        :items="virtualItems"
        keyField="_id"
        v-model:checkItems="virtualCheckItems"
        @on-scroll-end="onScrollEnd"
      >
      </virtual-scroll-grid>
    </div>
    <div class="dialog-footer">
      <el-button plain @click="handleCancel"> 取 消 </el-button>
      <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import virtualScrollGrid from '@/components/virtual-scroll/virtual-scroll-grid.vue';
import TableGroup from '@/components/group-menus/table-group.vue';

// hooks
import { useFetch } from '@/hooks/useFetch/index.js';

// api
import { allTypeGroup, userListGroup } from '@/apis/user';
import { getMaterialListImages, getMaterialListGroup } from '@/apis/images';

import { ImageUseStatus, ImageShowStatus } from '@/config/global-variable';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const emit = defineEmits(['update:modelValue', 'on-end', 'on-close']);

const props = defineProps({
  modelValue: {
    type: [Array],
    default: () => [],
  },

  isCommon: {
    type: [Boolean],
    default: false,
  },

  // 横向数量
  rowCount: {
    type: Number,
    default: 5,
  },

  itemSize: {
    type: Number,
    default: 90,
  },

  aspectRatio: {
    type: String,
    default: '9/16',
  },

  // 0 普通用户 1 admin
  userType: {
    type: [String, Number],
    default: 0,
  },

  imageType: {
    type: [String, Number],
    default: '',
  },
});

const searchParams = ref({ image_group_id: '', image_type: '', userid: 1, use_status: 0 });

if (props.userType == 1) {
  searchParams.value.userid = -1;
}

searchParams.value.image_type = props.imageType;

const groupLoading = ref(false);
const groupData = ref([]);
const initGetMaterialListGroup = async () => {
  groupLoading.value = true;
  const res = await getMaterialListGroup({
    ...searchParams.value,
    group_type: searchParams.value.image_type,
  });
  groupLoading.value = false;
  if (res.code == 0) {
    groupData.value = [{ _id: '', name: '全部' }, ...res.data.data];
  }
};

// 分类列表
const { loading: typeLoading, data: typeGroupData } = useFetch({
  api: props.userType == 1 ? allTypeGroup : userListGroup,
});

// 分类列表

const virtualItems = ref([]);

const virtualCheckItems = ref([]);

const virtualLoading = ref(false);

const imagesize = ref(60);

const initListImages = async () => {
  virtualLoading.value = true;
  let last_id = '';
  if (virtualItems.value.length > 0) {
    last_id = virtualItems.value[virtualItems.value.length - 1]._id;
  }
  const res = await getMaterialListImages({
    last_id,
    size: imagesize.value,
    image_group_id: searchParams.value.image_group_id,
    use_status: searchParams.value.use_status,
    image_type: searchParams.value.image_type,
    userid: searchParams.value.userid,
  });
  virtualLoading.value = false;

  if (res.code == 0) {
    if (virtualItems.value.length == 0) {
      virtualItems.value = res.data.data;
    } else {
      virtualItems.value = virtualItems.value.concat(res.data.data);
    }
    console.log(virtualItems.value, 'virtualItems');
  }
};

const onScrollEnd = () => {
  if (!virtualLoading.value && virtualItems.value.length >= imagesize.value) {
    initListImages();
  }
};

const onImageChange = () => {
  virtualItems.value = [];
  searchParams.value.image_group_id = '';
  initListImages();
  // groupParams.value.userid = searchParams.value.userid;
  // groupParams.value.image_type = searchParams.value.image_type;
  initGetMaterialListGroup();
};

const onImageStatusChange = () => {
  virtualItems.value = [];
  initListImages();
};

const onGroupChange = () => {
  virtualItems.value = [];
  initListImages();
};

const onGroupTypeChange = () => {
  initGetMaterialListGroup();
};

const handleCancel = () => {
  modalStore.closeModal();
  emit('on-close');
};

const handleConfirm = () => {
  modalStore.closeModal();

  emit('update:modelValue', virtualCheckItems.value);
  emit('on-end', virtualCheckItems.value);
};

const initModal = () => {
  const data = modalStore.getModal('select-image-popup');

  virtualCheckItems.value = data.image_list || [];

  if (data.image_type) {
    searchParams.value.image_type = data.image_type;
  }

  initGetMaterialListGroup();

  initListImages();

  console.log(data, 'data');
};

initModal();
</script>

<style lang="scss" scoped>
.select-image-popup {
  width: 100%;
  height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.image-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-right: 10px;
  // border-right: 1px dashed var(--el-border-color);
  box-sizing: border-box;
}

.image-group-radio {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.image-group-content {
  height: 100%;
}

.content {
  display: flex;
  flex: 1;
  height: 0;
}
</style>
